<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-box">
        <view
          class="btn"
          @click="goHome"
          :style="`--icon: url(${base_url + '/static/goHome.svg'});`"
        ></view>
        <view
          class="btn"
          @click="goBack"
          :style="`--icon: url(${base_url + '/static/goBack.svg'});`"
        ></view>
      </view>
      <view class="subNav">
        <view
          class="nav-btn"
          @click="type = 'like'"
          :style="`--c: ${type == 'like' ? 'rgb(229, 132, 88)' : '#ffffff00'}`"
          >关注</view
        >
        <view
          class="nav-btn"
          @click="type = 'belike'"
          :style="`--c: ${
            type == 'belike' ? 'rgb(229, 132, 88)' : '#ffffff00'
          }`"
          >粉丝</view
        >
      </view>
    </view>
    <view class="content-scroll">
      <view class="search-line">
        <view
          class="search-box"
          :style="`--icon: url(${base_url + '/static/search.svg'})`"
        >
          <input type="text" />
        </view>
      </view>
      <scroll-view class="scroll" scroll-y="true">
        <view class="fans-list" v-show="type == 'like'">
          <Fans
            v-for="item in likeList"
            :avatar="base_url + item.avatar"
            :name="item.name"
            :static="item.static"
            type="like"
            :key="item.id"
          />
        </view>
        <view class="fans-list" v-show="type == 'belike'">
          <Fans
            v-for="item in fansList"
            :avatar="base_url + item.avatar"
            :name="item.name"
            :static="item.static"
            type="like"
            :key="item.id"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref } from "vue";

import { base_url } from "../../api/config";

import Fans from "../../components/user/Fans.vue";

let type = ref("like");

// 获取页面参数
onLoad((options) => {
  // 'like' or 'belike'
  type.value = options.type || "like";
});

// 关注列表
let likeList = ref([
  { id: 1, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 2, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 3, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 4, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 5, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 6, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 7, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 8, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 9, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  {
    id: 10,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 11,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 12,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 13,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 14,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 15,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 16,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 17,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 18,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 19,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 20,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 21,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 22,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 23,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 24,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 25,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 26,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 27,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
]);

// 粉丝列表
let fansList = ref([
  { id: 1, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  {
    id: 2,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  { id: 3, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 4, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  {
    id: 5,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 6,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  { id: 7, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  { id: 8, avatar: "/static/default_avatar.jpg", name: "陈树洞", static: true },
  {
    id: 9,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 10,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 11,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 12,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 13,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 14,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 15,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 16,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 17,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 18,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 19,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 20,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 21,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 22,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 23,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 24,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 25,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: false,
  },
  {
    id: 26,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
  {
    id: 27,
    avatar: "/static/default_avatar.jpg",
    name: "陈树洞",
    static: true,
  },
]);

function goHome() {
  uni.reLaunch({
    url: "/pages/main/main",
  });
}

function goBack() {
  uni.navigateBack();
}

onReachBottom(() => {
  console.log("触底事件");
});

onPullDownRefresh(() => {
  uni.stopPullDownRefresh();
});
</script>

<style scoped lang="less">
.page {
  // background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
  display: flex;
  flex-direction: column;
  position: relative;

  .nav-bar {
    box-sizing: border-box;
    width: 100%;
    height: 30vw;
    padding-top: 15vw;
    position: sticky;
    top: 0;
    background-color: rgb(255, 212, 168);
    z-index: 1;

    .nav-box {
      width: min-content;
      padding: 1vw;
      background-color: rgba(136, 136, 136, 0.4);
      display: flex;
      border-radius: 0 5vw 5vw 0;

      .btn {
        width: 12vw;
        height: 7vw;
        background-image: var(--icon);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    .subNav {
      width: min-content;
      padding: 1vw;
      display: flex;
      gap: 5vw;
      position: absolute;
      top: 15vw;
      left: 50%;
      transform: translateX(-50%);

      .nav-btn {
        font-size: 5vw;
        word-wrap: none;
        white-space: nowrap;
        position: relative;

        &::after {
          --h: 1vw;
          content: "";
          display: block;
          width: 50%;
          height: var(--h);
          background-color: var(--c);
          border-radius: var(--h);
          position: absolute;
          left: 50%;
          bottom: -2vw;
          transform: translateX(-50%);
        }
      }
    }
  }

  .content-scroll {
    flex: 1;
    background-color: #fff;
    overflow: hidden;

    .search-line {
      width: 100%;
      height: 10vw;
      padding: 5vw 0 0;

      .search-box {
        box-sizing: border-box;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        padding-left: 10vw;
        padding-right: 5vw;
        background-color: #eee;
        border-radius: 5vw;
        position: relative;

        &::after {
          --size: 5vw;
          content: "";
          display: block;
          width: var(--size);
          height: var(--size);
          background-image: var(--icon);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          top: 50%;
          left: 3vw;
          transform: translateY(-50%);
        }

        input {
          --h: 10vw;
          height: var(--h);
          line-height: var(--h);
        }
      }
    }

    .scroll {
      box-sizing: border-box;
      height: 100%;
      padding: 2vw 0;
    }
  }
}
</style>
